<template>
  <div class="panel">
    <el-button @click="clear">清空</el-button>
    <el-button @click="setFlatStyleByAttribute">根据属性值设置样式</el-button>
    <el-button @click="useStyleVariable">使用样式变量</el-button>
  </div>
  <base-map :center="center" :zoom="zoom" />
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import WebGLVectorLayer from "ol/layer/WebGLVector";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import Feature from "ol/feature";
import { Point, LineString, Polygon, Circle } from "ol/geom";
import { GeoJSON } from "ol/format";

import { removeLayerBy } from "@/utils/layer";

// const center = [108.89766828762245, 33.42875613964681];
// const zoom = 5;

const center = [119.5408657586792, 32.92253513378263];
const zoom = 8;

function clear() {
  const layers = ["weather-station"];
  removeLayerBy(window.map, layer => layers.includes(layer.id));
}

function setFlatStyleByAttribute() {
  const weatherStationLayer = new VectorLayer({
    properties: {
      name: "气象站点",
      id: "weather-station",
    },
    source: new VectorSource({
      format: new GeoJSON(),
      url: "src/data/气象站点/stations-wgs.geojson",
    }),
  });

  const labelStyle = {
    "text-value": ["get", "name"], //文本值
    "text-font": "bold 14px sans-serif", //文本字体
    "text-offset-y": 20, //文本垂直偏移
    "text-fill-color": "#333", //文本填充颜色
    "text-stroke-color": "#fff", //文本描边颜色
    "text-stroke-width": 2, //文本描边宽度
    "text-declutter-mode": "declutter", //文本冲突处理模式
  };

  weatherStationLayer.setStyle([
    {
      filter: ["==", ["get", "type"], "基本站"],
      style: [
        {
          "circle-radius": 5, //圆半径
          "circle-fill-color": "rgb(255,0,0)", //圆填充颜色
          "circle-stroke-width": 1.25, //圆边框宽度
          "circle-stroke-color": "#3399CC", //圆边框颜色
        },
        labelStyle,
      ],
    },
    {
      else: true,
      style: [
        {
          "circle-radius": 5, //圆半径
          "circle-fill-color": "rgba(255,255,255,0.4)", //圆填充颜色
          "circle-stroke-width": 1.25, //圆边框宽度
          "circle-stroke-color": "#3399CC", //圆边框颜色
        },
        labelStyle,
      ],
    },
  ]);

  window.map.addLayer(weatherStationLayer);
}

function useStyleVariable() {
  const jsLayer = new WebGLVectorLayer({
    properties: {
      name: "江苏省行政区划",
      id: "js-layer",
    },
    source: new VectorSource({
      url: "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=320000_full",
      format: new GeoJSON(),
    }),
    variables: {
      highlightedName: "南京市",
    },
  });
  jsLayer.setStyle([
    {
      filter: ["==", ["var", "highlightedName"], ["get", "name"]],
      style: [
        {
          "fill-color": "rgba(255,255,255,0.4)",
          "stroke-width": 3,
          "fill-color": "gold",
        },
      ],
    },
    {
      else: true,
      style: {
        "fill-color": "rgba(255,255,255,0.4)",
        "stroke-color": "#3399CC",
        "stroke-width": 1.25,
      },
    },
  ]);

  const displayFeatureInfo = function (pixel) {
    const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
      return feature;
    });

    jsLayer.updateStyleVariables({ highlightedName: feature.get("name") });
  };

  window.map.on("pointermove", function (evt) {
    if (evt.dragging) {
      return;
    }
    displayFeatureInfo(evt.pixel);
  });

  window.map.addLayer(jsLayer);
}
</script>

<style lang="less" scoped></style>
